<template>
  <div class="singsong">
    <FooterMusicVue></FooterMusicVue>

    <div class="topone">
      <div class="back" >
        <svg @click="back" aria-hidden="true" class="icon bofang">
          <use xlink:href="#icon-direction-left">

        </use>
      </svg>
    </div>
    <div class="classify">
        <h3>全部歌曲</h3>
    </div>
  </div>
    <!-- <div class="thetop">....
          <div class="back">
            <svg class="icon bofang" aria-hidden="true" @click="back">
            <use xlink:href="#icon-jiantouxiangzuo"></use>
           </svg>
          </div>  
        </div>
  
    <div class="s-song-list">
      <hr>
      <div class="s-song-list-item" v-for="(item, index) in singerSongData" :key="index">
      <ListItem :singer-data="item" :is-play-icon="true" @changeplay="changeSongIconStatus"></ListItem><hr>
      </div>
      
    </div> -->

    <div class="allite" v-for="(item, i) in singerSongData" :key="i">
      <div class="iteLis" :singer-data="item" :is-play-icon="true">
        <div class="item" @click="updateIndex(item)">
          <div class="theitemLeft" >
            <span class="leftSpan">{{ i + 1 }} </span>
          </div>
          <div class="musicsong">
            <p>{{ item.name }}</p>

            <span v-for="(itemone, index) in item.artists" :key="index">
              {{ itemone.name }}
            </span>
          </div>
        </div>
      </div>
      <div class="theitemRight">
        <div>
          <svg class="icon bofang" aria-hidden="true" v-if="item.mvid != 0">
            <use xlink:href="#icon-play"></use>
          </svg>
        </div>
        <svg class="icon liebiao" aria-hidden="true">
          <use xlink:href="#icon-bofanggedan"></use>
        </svg>
      </div>
    </div>
  

    <!-- 辅助监听vuex的isPlay变化 -->
    <input type="hidden" :value="isPlay" />
  </div>
</template>

<script>
import FooterMusicVue from "../components/item/FooterMusic.vue";
// import SongboplayVue from "../components/item/FooterMusic.vue";

//引用才能解构
import { mapMutations } from 'vuex';


import { mapState } from "vuex";
import ListItem from "../components/ListItem.vue";
export default {
  name: "Singsong",

  components: {
    FooterMusicVue,
    ListItem,
   
  },

  data() {
    return {
      //引入搜索关键字
      keyWordList: [],
      //搜索结果数据
      // searchworld: [],

      singerSongData: [],
      singlist:[]
    };
  },

  created() {
    //截取传过来歌手的id
    //获取歌手的id
    let singerId = this.$route.params.id;
    this.getSongsBySingerId(singerId);
  },

  computed: {
    ...mapState({
      currentAudioInfo: "currentAudioInfo",

      isPlay(state) {
        //改变歌手的全部歌曲的播放图标状态
        for (let i = 0; i < this.singerSongData.length; i++) {
          if (this.singerSongData[i].id === this.currentAudioInfo.audioId) {
            this.singerSongData[i].isPlay = state.isPlay;
            break;
          }
        }

        return state.isPlay;
      },
    }),
  },
  
  mounted() {
    this.keyWordList = JSON.parse(localStorage.getItem("keyWordList"))
      ? JSON.parse(localStorage.getItem("keyWordList"))
      : [];
  },

  methods: {
  
    ...mapMutations(['backplay','play','duration','updateDuration','gettheLyricone','updateCurrentTime','updateIsbtnShow','updateDetailShow']),
 
    back:function() {
      // this.$refs.audio.paused
      // console.log("输出的$refs" ,$refs);
      let isback = true
      if (isback) {
        this.$children[0].backplay()
       
      }else{
        
      } 
      this.$router.back();
    },
 

    //修改播放列表的下标 添加到最后然后播放最后的歌曲
    //item是歌曲的对象 是传过去的对象
    updateIndex: function (item) {
      console.log("isitem===>",item);
      
      item.al = item
      item.al.picUrl = item.picUrl
      item.al.name = item.name
      // item.al.picUrl = item.singlis.picUrl;
      // item.al.name = item.name;
      
      //进行提交使用pushPlayList函数 vuex里面
      this.$store.commit("pushPlayList", item);
      //播放push到最后的一首歌 vux里
      this.$store.commit(
        "updatePlayListIndex",
        this.$store.state.playList.length - 1
      );
    },
    
    //根据歌手的id获取全部歌曲
    getSongsBySingerId(singerId) {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/music/artist/songs",
        params: {
          id: singerId,
          limit: 10,
          offset: 0,
        },
      })
        .then((res) => {
          // console.log('根据歌手的id获取这个歌手的全部歌曲 res ==> ', res);

          let data = res.data.songs.map((item) => {
            //可能存在多个歌手
            let singers = [];
            item.ar.forEach((singer) => {
              //歌手获取
              singers.push(singer.name);
              
            });

            return {
              //歌曲的id
              id: item.id,
              name: item.name,
              picUrl: item.al.picUrl,
              singerName: singers.join("/"),
              isPlay: false,
            };
          });
           let ttt = this.singerSongData
          this.singerSongData.push(...data);

          let isarr = [];
          for (let i = 0; i < 1; i++) {
            isarr.push({
              album:this.singerSongData,
              artist:this.singerSongData[i].picUrl,
              names: this.singerSongData[i].name
            })
            console.log("isarr=======>",isarr);
          }

          this.singlist = isarr
          // this.singlist.push(ttt)
          console.log("000000singlist==>",this.singlist);
          console.log("ttt===is==>",ttt);
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },

    // //修改歌曲的播放图标状态
    changeSongIconStatus() {
      for (let i = 0; i < this.singerSongData.length; i++) {
        if (this.singerSongData[i].isPlay) {
          this.singerSongData[i].isPlay = false;
          break;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.singsong {

  .topone {
    display: flex;
    align-items: center;
    margin: 0 10px 10px 10px;
    .back {
      margin-right: 10px;
    }
  }
  .classify {
    margin: 0;
  }
  .allite {
    // width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // background-color: #bdbdbd;
    // border-radius: 10px;
    margin: 10px;
    .iteLis {
      width: 83%;
      // height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item {
        margin-left: 10px;
        display: flex;
        align-items: center;
        .theitemLeft {
          .leftSpan {
            font-size: medium;
            font-weight: 600;
            margin-right: 10px;
            color: #4d4d4e;
          }
        }
        .musicsong {
          word-wrap: break-word;
          *word-break: break-all;
          width: 220px;

          p {
            white-space: pre-wrap;
            width: 210px;
            //  width: 80%;
            //有特殊字符只显示一行
            word-wrap: break-word;
            font-size: medium;
            font-weight: 900;
            margin: 6px 0;
          }
          span {
            font-size: small;
            color: #bdbdbd;
          }
        }
      }
    }
    .theitemRight {
      margin-right: 10px;
      display: flex;
      align-items: center;
      .bofang {
        margin-right: 10px;
      }
    }
  }
  .s-song-list {
    margin: 0;
  }
}
</style>
